{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LMS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="{% static 'lms/bootstrap5/css/bootstrap.min.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'lms/bootstrap5/font/bootstrap-icons.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'lms/css/style.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'lms/bootstrap-fileinput-v5/css/fileinput.min.css' %}" rel="stylesheet" type="text/css">
    <script src="{% static 'lms/bootstrap5/js/bootstrap.js' %}"></script>
    <script src="{% static 'lms/js/jquery-3.6.1.min.js' %}"></script>
    <script src="{% static 'lms/bootstrap-fileinput-v5/js/fileinput.min.js' %}"></script>
    <script src="{% static 'lms/bootstrap-fileinput-v5/js/locales/zh.js' %}"></script>
    <script src="{% static 'lms/js/main.js' %}"></script>
</head>
<body>
<div class="container">

    <div class="flex-shrink-0 p-3 bg-white" style="width: 280px;">
    <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
      <svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
      <span class="fs-5 fw-semibold">Collapsible</span>
    </a>
    <ul class="list-unstyled ps-0">
      <li class="mb-1">
        <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="true">
          Home
        </button>
        <div class="collapse show" id="home-collapse">
          <ul class="nav btn-toggle-nav list-unstyled fw-normal pb-1 small">
            <li><a id="h1_a" href="#h1" class="link-dark rounded" >Overview</a></li>
            <li><a id="h2_a" href="#h2" class="link-dark rounded" >Updates</a></li>
            <li><a id="h3_a" href="#h3" class="link-dark rounded" >Reports</a></li>
          </ul>
        </div>
      </li>
      <li class="mb-1">
        <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false">
          Dashboard
        </button>
        <div class="collapse" id="dashboard-collapse">
          <ul class="nav btn-toggle-nav list-unstyled fw-normal pb-1 small">
            <li><a id="h4_a" href="#h4" class="link-dark rounded" data-bs-toggle="tab">Overview</a></li>
            <li><a id="h5_a" href="#h5" class="link-dark rounded" data-bs-toggle="tab">Weekly</a></li>
            <li><a id="h6_a" href="#h6" class="link-dark rounded" data-bs-toggle="tab">Monthly</a></li>
            <li><a id="h7_a" href="#h7" class="link-dark rounded" data-bs-toggle="tab">Annually</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
    <div class="tab-content">
        <div class="tab-pane" id="h1">1</div>
        <div class="tab-pane" id="h2">2</div>
        <div class="tab-pane" id="h3">3</div>
        <div class="tab-pane" id="h4">4</div>
        <div class="tab-pane" id="h5">5</div>
        <div class="tab-pane" id="h6">6</div>
        <div class="tab-pane" id="h7">7</div>
    </div>
</div>
</body>

</html>